<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#f5f5f5"
            :ellipsis="false">
            <el-menu-item index="0">LOGO</el-menu-item>
            <div class="flex-grow" />
            <el-sub-menu index="2">
                <!-- <template #title>{{ userInfo.nickName }}</template> -->
                <el-menu-item index="2-1" @click="logoutClick">退出登录</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useUserStore } from "@/store/user";
import { logout } from "@/api/login.js";
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
let activeIndex = ref('1')
let userInfo = ref({})
const userStore = useUserStore();
onMounted(() => {
    userInfo.value = JSON.parse(sessionStorage.getItem('userInfo'))
    console.log(userInfo.value, 'userInfo.value')
})
const logoutClick = () => {
    logout().then((res) => {
        router.push('/login');
        sessionStorage.clear();
        userStore.$reset();
    });
}

</script>

<style lang="less" scoped>
.el-menu {
    border: none;
    height: 60px;
}

.flex-grow {
    flex-grow: 1;
}
</style>